<template>
  <div class="home">
    <div class="box-card">
      <el-container>
        <el-header>
          <img src="../src/images/dgut.jpg" style="width: 200px;margin-top: 20px;margin-bottom: 30px">
        </el-header>
        <el-main>
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="margin-top: 150px;">
            <el-form-item label="账号:" prop="id" label-width="40%" style="margin-right: 130px;color: #0261a0" >
              <el-input v-model="ruleForm.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="pass" label-width="40%" style="margin-right: 130px;margin-bottom: 50px;color: #0261a0">
              <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button style="color: #0261a0;background-color:white;border-color: #0261a0;margin-right: 50px" @click="resetForm('ruleForm')">重置</el-button>
              <el-button style="color: white;background-color: #0261a0;border-color: #0261a0;margin-right: 100px" type="primary" @click="submitForm('ruleForm')">登录</el-button>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        pass: '',
        id: ''
      },
      rules: {
        pass: [
          { required: true, message: '请填写密码', trigger: 'blur' }
        ],
        id: [
          { required: true, message: '请填写账号',  trigger: 'blur' }
        ]
      },
      flag:{},
    };
  },
  methods: {
    submitForm(formName) {
      // console.log('begin1');
      this.$refs[formName].validate((valid) => {
        // console.log('begin2');
        if (valid) {
          let that = this;
          console.log('begin');
          that.$axios({
              method:'post',
              url:'http://localhost:9090/userLogin/submit',
              header:{
                // 'Content-type':'application/json'
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
              },
              data:{
                account:this.ruleForm.id,
                password:this.ruleForm.pass
              },
              transformRequest:[function (data){
                let ret =''
                for (let it in data){
                  ret +=encodeURIComponent(it) + '=' +encodeURIComponent(data[it]) + '&'
                }
                return ret
              }]
            }).then((res) => {
              // console.log(res.data.msg)

            if(res.data.msg==='登录成功！'){
              this.flag=res.data.data.flag;
              console.log(this.flag)
              // alert('登录成功!');
              if(this.flag===0){
                sessionStorage.setItem(this.flag,JSON.stringify(res.data.result));
                // this.$router.push('/Index')
                // this.$router.push({name:'Index',query:{id:this.ruleForm.id}});
                // this.$router.push('/Index/${this.ruleForm.id}')
                // this.$router.push(`Index/${this.ruleForm.id}`)
                this.$router.push({name:'Index', query:{id:this.ruleForm.id}
                })
              }
              else if(this.flag===1){
                sessionStorage.setItem(this.flag,JSON.stringify(res.data.result));
                // this.$router.push('/TeacherIndex')
                this.$router.push({name:'TeacherIndex', query:{id:this.ruleForm.id}})
              }
              else if (this.flag===2){
                sessionStorage.setItem(this.flag,JSON.stringify(res.data.result));
                this.$router.push({name:'AdminIndex', query:{id:this.ruleForm.id}})
              }
            }
            else {
              alert('账号名或密码错误！');
              location. reload()
              this.$router.go(0)
            }
            }).catch(function (error) {
                console.log('请求失败：' + error)
              })

          // that.axios.post('http://localhost:9090/userLogin/submit',{
          //   account:this.ruleForm.id,
          //   password:this.ruleForm.pass
          // }).then(res =>{
          //   console.log(res.data)
          // }).catch(err =>{
          //   console.log('报错：'+err)
          // })

          // alert('登录成功!');
        } else {
          console.log('登录失败!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>
.home{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2c3e50;
}
.box-card{
  height: 85%;
  width: 40%;
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 10px;
  /*background-color: rgba(255,255,255,0.6);*/
  background-color: #ffffff;
  transform: translate(-50%, -50%);
  border-radius: 1%;
}

</style>